<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>QQ简易聊天框</title>
    <link rel="stylesheet" href="css/chat.css">
</head>
<body>
<section id="chat">
    <div class="chatBody">
        <ul>
            <!-- <li>
                <img src="./images/head01.jpg" alt="">
                <span>随风</span>
                <p>1111111111111111</p>
            </li> -->
        </ul>
    </div>
    <div><img src="images/icon.jpg"></div>
    <textarea class="chatText"></textarea>
    <div class="btn"><span>关闭(C)</span><span id="send">发送(S)</span></div>
</section>
<script src="./js/jquery-1.12.4.js"></script>
<script>
    $(function(){
        var touxiang = new Array();
        touxiang[0] = "head01.jpg";
        touxiang[1] = "head02.jpg";
        touxiang[2] = "head03.jpg";

        var nickname = new Array();
        nickname[0] = "随风";
        nickname[1] = "松松";
        nickname[2] = "不良人";

        $("#send").click(function(){
            // 获取随机头像以及昵称
            var index1 = Math.floor(Math.random()*3);
            var index2 = Math.floor(Math.random()*3);

            // 获取输入的消息
            var content = $(".chatText").val();
            // trim() 去除空格
            if(content == "" || content.trim() == ""){
                return;
            }
            // 创建消息节点
            // es6的新特性 字符串声明的方式`````````
            var str = `<li>
                            <img src="./images/${touxiang[index1]}" alt="">
                            <span>${nickname[index2]}</span>
                            <p>${content}</p>
                        </li>`; 

            // 获取历史消息
            var history = $(".chatBody ul").html()

            // 追加到列表中
            $(".chatBody ul").html(history+str);

            // 样式操作

        });
    })
</script>
</body>
</html>